﻿@model String
@{
    var guid = Guid.NewGuid().ToString();
}
<script src="/CommonRoot/js/file-upload.js"></script>
<div id="d-@guid">
    <div class="input-group">
        <input type="text" class="form-control" autocomplete="off" v-model="name" disabled/>
        <input type="file" name="file" id="@guid-file-input" @@change="onFileInputChange" style="display:none;"/>
        <span class="input-group-addon" @@click="onSelectBtnClick" style="cursor:pointer;">选择</span>
    </div>
</div>
@Html.Hidden("", Model, new { id = guid + "-val" })

<script>
    new Vue({
        el: '#d-@guid',
        data: {
            name: null
        },
        methods: {
            onSelectBtnClick: function () {
                $('#@guid-file-input').click();
            },
            onFileInputChange: function () {
                var fileInput = arguments[0].target;
                if (!fileInput.files.length) return;

                // TODO: 这里是给外部的dom赋值了，是不科学的写法
                $('#Belong').val(fileInput.files[0].name);
                this.name = fileInput.files[0].name;

                $('#@guid-val').val(this.name);
            }
        }
    })
</script>
